<template>
    <div>
        <mt-search
                v-model="searchKey"
                cancel-text="取消"
                placeholder="请输入搜索内容">
        </mt-search>

        <mt-swipe :auto="4000" :prevent="true">
            <mt-swipe-item v-for="banner in banners" :key="banner"><img v-lazy.container="banner"></mt-swipe-item>
        </mt-swipe>

        <!--<mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"-->
                           <!--direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"-->
                           <!--style="left:30px;">-->
            <!--<div class="icon-popup" @touchstart="sub_log(1)">1</div>-->
            <!--<div class="icon-popup" @touchstart="sub_log(2)">2</div>-->
            <!--<div class="icon-popup" @touchstart="sub_log(3)">3</div>-->
        <!--</mt-palette-button>-->

        <mt-tabbar v-model="selected">
            <mt-tab-item id="1">
                <svg class="icon navIcon" aria-hidden="true" slot="icon">
                    <use xlink:href='#icon-index'/>
                </svg>
                首页
            </mt-tab-item>
            <mt-tab-item id="2">
                <svg class="icon navIcon" aria-hidden="true" slot="icon">
                    <use xlink:href='#icon-rent'/>
                </svg>
                租衣订单
            </mt-tab-item>
            <mt-tab-item id="3">
                <svg class="icon navIcon" aria-hidden="true" slot="icon">
                    <use xlink:href='#icon-shop'/>
                </svg>

                我的租铺
            </mt-tab-item>
            <mt-tab-item id="4">
                <svg class="icon navIcon" aria-hidden="true" slot="icon">
                    <use xlink:href='#icon-info'/>
                </svg>
                个人中心
            </mt-tab-item>
        </mt-tabbar>
    </div>

</template>

<script type="es6">
	import searchInput from 'component/common/searchInput'
	import message from 'component/common/message'
	import {getProductList} from 'dataAPI/product'
    import appFooter from 'component/common/footer/footer'
    import util from 'util'
	export default {
		name: 'index',
		data () {
			return {
              searchKey:'',
              selected:1,
              banners:["static/p1.png","/static/p2.png","/static/p3.png"]
			}
		},
		mounted (){
		},
		components: {
		},
		methods: {
//          main_log(val) {
//            console.log('main_log', val);
//          },
//          sub_log(val) {
//            console.log('sub_log', val);
//            this.$refs.target_1.collapse();
//          }
		}
	}
</script>

<style lang="less">
    ::-moz-placeholder{
        color: #fff
    }
    ::placeholder{
        color: #fff
    }
    :-ms-input-placeholder{
        color: #fff
    }
    ::-webkit-input-placeholder{
        color: #fff
    }
    :-moz-placeholder{
        color: #fff
    }
    input[type="search"]::-webkit-search-cancel-button{
        display:none
    }
    input[type="search"]{
        -webkit-appearance:none
    }
    .mint-search{
        height: auto;
    }
    .mint-swipe{
        height: 170px;
        img{
            height: 100%;
            width: 100%;
        }
    }
    .mint-main-button{
        font-size: inherit;
    }
    .icon-popup{
        width: 36px;
        height: 36px;
        background: #000;
        border-radius: 50%;
        top:10px;
        left: 10px;
    }
    .mint-searchbar{
        background: #26A2FF;
        .mint-searchbar-inner{
            background: inherit;
            position: relative;
            padding-left:0;
            padding-right: 0;
            .mintui-search{
                font-size: 1rem;
                color: #fff;
            }
            input {
                color: #fff;
                background: inherit;
                padding: 3px 10px;
                line-height: 22px;
                font-size: .7rem;
                height: 20px;
                display: block;
            }
            &:after {
                content: " ";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-color: #fff;
                transform-origin: 0 0;
                transform: scaleY(0.5);
            }

        }
        .mint-searchbar-cancel{
            margin-left: 20px;
            font-size:.7rem;
            color:#fff;
        }
    }


</style>
